<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="pageTitle" value="Usuários | ReviewIt" />
	<ui:param name="pageName" value="page-users" />

	<ui:define name="css"></ui:define>

	<ui:define name="feature"></ui:define>

	<ui:define name="content">
		<h3 class="title">
			<div class="icon-group"></div>
			Usuários
		</h3>
		<h:form id="form-search-users" onkeypress="if (event.keyCode == 13) { document.getElementById('form-search-users:form-search-btn').click(); return false; }">
			<h:outputText id="form-search-users-msg"
				value="#{sessionScope['msgUsuarioNaoEncontrado']}" />
			<div class="row collapse">
				<div class="small-9 large-10 columns">
					<p:inputText id="search-user" value="#{userBean.user.firstName}" />
					<p:watermark for="search-user" value="Procurar..." />
				</div>
				<div class="small-3 large-2 columns">
					<h:commandLink id="form-search-btn" action="#{userBean.procurar()}"
						update="form-search-users, form-search-users-msg, list-users">
						<span class="prefix"> <i class="icon-search"></i>
						</span>
					</h:commandLink>
				</div>
			</div>
		</h:form>
		<hr />
		<div class="users" id="list-users">
			<p:dataGrid var="user" value="#{userBean.users}" columns="3"
				rows="12" paginator="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="10, 25, 50">
				<div class="user">
					<a href="user.xhtml?user_id=#{user.id}"> <img
						src="data:image/jpg;base64,#{user.photo}" />
						<div class="user-details">
							<div>
								<span class="icon-user"></span> #{user.firstName}
								#{user.lastName}
							</div>
							<div>
								<span class="icon-map-marker"></span> #{user.location}
							</div>
							<div>
								<span class="icon-star"></span> #{userBean.getUserScore(user)} | 
								<span class="icon-file-alt"></span> #{userBean.getUserDocumentCount(user)}
							</div>
						</div>
					</a>
				</div>
			</p:dataGrid>
		</div>
	</ui:define>
</ui:composition>